 <template>
 <div>
          <div class="crumbs">
            <el-breadcrumb separator="/">
                <h3 style="color #DDDDDD">当前位置:自动排考管理/排考一览表</h3>
            </el-breadcrumb>
        </div>
        <el-form ref="form" :model="sizeForm" label-width="40px" size="mini">
		
            <el-form-item label="时间">
              <el-col :span="11">
                <el-date-picker type="datetime"  placeholder="选择日期" v-model="sizeForm.date1" style="width: 100%;"></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-date-picker  type="datetime" placeholder="选择日期" v-model="sizeForm.date2" style="width: 100%;"></el-date-picker>
              </el-col>
            </el-form-item>
            <el-form-item label="教室">
              <el-select v-model="sizeForm.region"  placeholder="全部">
                <el-option  v-for="(item,x) in region"  :key="x" :label="item.classroomname" :value="item.classroomname"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="教师">
              <el-select v-model="sizeForm.teacher" placeholder="全部">
                <el-option  v-for="(item,index) in common" :key="index" :label="item.curriculumteacher" :value="item.curriculumteacher"></el-option>
              </el-select>
            </el-form-item>
             <el-form-item label="班级">
              <el-select v-model="sizeForm.class" placeholder="全部">
                <el-option v-for="(item,y) in classname" :key="y" :label="item.classname" :value="item.classname"></el-option>

              </el-select>
            </el-form-item>
             <el-form-item label="课程">
              <el-select v-model="sizeForm.course" placeholder="全部">
                <el-option  v-for="(items,indexs) in common" :key="indexs" :label="items.curriculumname" :value="items.curriculumname"></el-option>

              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button  @click="onSubmit">查询</el-button>
              <el-button @click="refresh">重置</el-button>
            </el-form-item>
        </el-form>
		<el-row>
			<el-button  @click="outExcel">导出excel</el-button>
			<el-button  @click="deleteExcel">清空excel</el-button>
		</el-row>
    <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column  
            prop="id"
            label="序号"
            width="250">
          </el-table-column>
          <el-table-column
            prop="date"
            label="日期"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="amorpm"
            label="上午/下午"
            width="250">
          </el-table-column>
          <el-table-column
            prop="time"
            label="考试时间"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="major"
            label="专业"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="year"
            label="年级"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="classname"
            label="班级名称"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="course"
            label="课程名称"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="classroomObj.kszw"
            label="人数"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="classroomObj.xq"
            label="校区"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="classroomObj.classroomname"
            label="教室名称"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="teacherObj.mainteacher"
            label="主监考教师"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="teacherObj.viceteacher"
            label="副监考教师"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="teacherObj.iscancelinvigilate"
            label="是否免监考"
            width="250"
            >
          </el-table-column>
          <el-table-column
            prop="teacherObj.xunkaoteacher"
            label="巡考教师"
            width="250"
            >
          </el-table-column>
        </el-table>
        <el-pagination
        background
      layout="prev, pager, next"
      :page-size="currentPage.page"
      :total="currentPage.total"
      :page-count="currentPage.count"
      :current-page="currentPage.current"
      @current-change="page">
      >
    </el-pagination>
 </div>
</template>
<script>
  import{findExamInfo,getClassroom,getTheacherAndCourse,getClassname,findByClassroomAndTeacherAndClassnameAndCourse} from '../api/index.js'
  import {xlsx} from '../components/XLSX_2_0.js'
   export default {
        created(){
           this.getdata(1);
		   
        },
		mounted() {
			
			this.getClassname();
			this.getClassroom();
			this.getTheacherAndCourse();
		},
		watch:{
			"sizeForm.date1":function(NewVal,OldVal){
				console.log("前====>"+NewVal)
			},
			"sizeForm.date2":function(NewVal,OldVal){
				console.log("后====>"+NewVal)
			}
		},
        methods: {
			deleteExcel(){
				this.data.length=0
				this.$message({
				          message: '清空成功！',
				          type: 'success'
				        });
			},
			 deepClone(obj){

			        var _obj = JSON.stringify(obj);  //  对象转成字符串

			        var objClone = JSON.parse(_obj); //  字符串转成对象
			        return objClone;
			    },
			outExcel(){
				if(this.data.length!=0){
					var datatemp=this.deepClone(this.data);
					
					xlsx(this.data,this.listHander,'排考一览表')
					this.data.length=0
					this.data=datatemp
				}else{
					this.$message({
					          message: '请先筛选数据',
					          type: 'warning'
					        });
				}
			},
			refresh(){
				this.$nextTick(()=>{
					this.sizeForm={
					  date1: '',
					  date2: '',
					  region: '',
					  teacher:'',
					  class:'',
					  course:''
					}
				})
				this.getdata(this.currentPage.page);
				
			},
          getdata(obj){
            this.currentPage.page=obj
            findExamInfo(this.currentPage).then(Object=>{
              this.tableData=Object.records[0];
                this.currentPage.total=Object.rowCount;
                this.currentPage.page=Object.pageCurrent;
				for( var idx in this.tableData){
					var temp=this.tableData[idx];
					var dataTemp={
						id:temp.id,
						date:temp.date,
						amorpm:temp.amorpm,
						time:temp.time,
						major:temp.major,
						year:temp.year,
						classname:temp.classname,
						course:temp.course,
						kszw:temp.classroomObj.kszw,
						xq:temp.classroomObj.xq,
						classroomname:temp.classroomObj.classroomname,
						mainteacher:temp.teacherObj.mainteacher,
						viceteacher:temp.teacherObj.viceteacher,
						iscancelinvigilate:temp.teacherObj.iscancelinvigilate,
						xunkaoteacher:temp.teacherObj.xunkaoteacher											 
					}
					this.data.push(dataTemp);								 
				}
            })
          },
		  onSubmit(){
			  findByClassroomAndTeacherAndClassnameAndCourse(this.sizeForm).then(res=>{
				  this.$nextTick(()=>{
					  this.tableData=[];
					  this.tableData=res.data;
				  })
			  })
		  },
		  getClassroom(){
			  getClassroom().then(res=>{
				  this.region=res
			  })
		  },
		  getTheacherAndCourse(){
		  			  getTheacherAndCourse().then(res=>{
						  this.common=res
					  })
		  },
		  getClassname(){
		  			getClassname().then(res=>{
						this.classname=res
					})
		  },
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                this.currentPage.current=currentPage;
                 this.getdata();  
            }
        },
        data() {
            return {
				listHander:{
					id:"排考编号",
					date:"考试日期",
					amorpm:"上午/下午",
					time:"考试时间",
					major:"专业",
					year:"年级",
					classname:"考试班级",
					course:"考试科目",
					kszw:"人数",
					xq:"校区",
					classroomname:"考试教室",
					mainteacher:"监考教师1",
					viceteacher:"监考教师2",
					iscancelinvigilate:"是否免监考",
					xunkaoteacher:"巡考教师"
				},
				data:[],
                total: null,
                tableData: null,
                dialogFormVisible:false,
                currentPage:{
                  page:1,
                  total:20,
                  count:50,
                  current:0 ,
                  limit:10
                },
				region:[],
				common:[],
				classname:[],
                sizeForm:{
                  date1: '',
                  date2: '',
                  region: '',
                  teacher:'',
                  class:'',
                  course:''
                }
            }
        }
    }
</script>